<template>
  <div ref="chart1" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue'
// 引入接口
import { reqBarAPI } from '@/api/visual/index'

const chart1 = ref()
const { proxy } = getCurrentInstance() as any
const legend = ref([])
const title = ref()
const x = ref([])
const y = ref([])
// 发起请求的函数
const init = async () => {
  let res = await reqBarAPI()
  if (res.code === 200) {
    legend.value = res.data.legend
    title.value = res.data.title
    x.value = res.data.x
    y.value = res.data.y
  }
}
onMounted(() => {
  init().then(() => {
    // 获取挂载的组件实例
    const echarts = proxy.$ECharts
    //初始化挂载
    const echarts1 = echarts.init(chart1.value)
    //添加配置
    echarts1.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        formatter: function (params) {
          // params[0] 是当前悬浮的柱状图数据
          const value = params[0].value
          return `${params[0].name}: ${value} 元` // 添加单位“元”
        },
      },

      grid: {
        top: '15%',
        right: '3%',
        left: '5%',
        bottom: '12%',
      },
      xAxis: [
        {
          type: 'category',
          data: x.value,
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.12)',
            },
          },
          axisLabel: {
            margin: 10,
            color: '#e2e9ff',
            textStyle: {
              fontSize: 14,
            },
          },
        },
      ],
      yAxis: [
        {
          name: '单位：元',
          axisLabel: {
            formatter: '{value}',
            color: '#e2e9ff',
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,1)',
            },
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.12)',
            },
          },
        },
      ],
      series: [
        {
          type: 'bar',
          data: y.value,
          barWidth: '20px',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(0,244,255,1)', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,77,167,1)', // 100% 处的颜色
                  },
                ],
                false,
              ),
              barBorderRadius: [30, 30, 30, 30],
              shadowColor: 'rgba(0,160,221,1)',
              shadowBlur: 4,
            },
          },
          label: {
            normal: {
              show: true,
              lineHeight: 30,
              width: 80,
              height: 30,
              backgroundColor: 'rgba(0,160,221,0.1)',
              borderRadius: 200,
              position: ['-8', '-60'],
              distance: 1,
              formatter: ['    {d|●}', ' {a|{c}元}     \n', '    {b|}'].join(
                ',',
              ),
              rich: {
                d: {
                  color: '#3CDDCF',
                },
                a: {
                  color: '#fff',
                  align: 'center',
                },
                b: {
                  width: 1,
                  height: 30,
                  borderWidth: 1,
                  borderColor: '#234e6c',
                  align: 'left',
                },
              },
            },
          },
        },
      ],
    })
    // 自适应
    window.onresize = function () {
      echarts1.resize()
    }
  })
})
</script>

<style lang="scss" scoped></style>
